@use 'sass:map';
@use '@angular/material/index' as mat;
@use '@gravitee/ui-particles-angular/index' as gio;
$typography: map.get(gio.$mat-theme, typography);

.breadcrumb {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;

  * {
    margin-right: 8px;
  }

  &__item {
    @include mat.typography-level($typography, 'subtitle-2');
    color: mat.get-color-from-palette(gio.$mat-space-palette, 'default');
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__item:last-of-type:not(:only-of-type) {
    @include mat.typography-level($typography, 'subtitle-2');
    color: mat.get-color-from-palette(gio.$mat-space-palette, 'default');
    background-color: mat.get-color-from-palette(gio.$mat-dove-palette, 'default');
    max-width: 450px;
  }
}

.clickable {
  cursor: pointer;
}
